import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import Util from './../../util/util';

export default class refundCash extends Component < {} > {
  constructor(props) {
    super(props);
    this.state = {
      text: ''
    }
  }
  static navigationOptions = {
    headerTitle: '申请退款'
  }
  render() {
    return(
      <View style={styles.container} >
        <View style={styles.topOrderInfo} >
          <Text style={styles.title} >订单号：89492749</Text>
          <Text style={styles.title} >2017-08-03 17:32</Text>
        </View>
        <View style={{backgroundColor:'#fff'}} >
          <View style={{ backgroundColor: '#F7F7F7', height: Util.pixel,marginLeft:12*Util.size.width/375,marginRight:12*Util.size.width/375}} ></View>
        </View>


        <View style={styles.toyMsg} >
          <Image source={{uri: 'toy_4'}} style={{width:100,height:100}} />
          <View>
            <Text style={{marginTop:20,fontSize:16,color:'#333'}} >玩具汽车</Text>
            <View style={{flexDirection:'row',justifyContent: 'space-between'}} >
              <Text style={{fontSize:14,color:'#666',marginTop:20*Util.size.height/667}} >已租：5天</Text>
              <View style={{flexDirection:'row',marginLeft:50*Util.size.width/375}} >
                  <Text style={{fontSize:14,color:'#666',marginTop:20*Util.size.height/667}}>产生租金：</Text>
                  <Text style={{fontSize:18,color:'#E22924',marginTop:15*Util.size.height/667}}>10</Text>
                  <Text style={{fontSize:14,color:'#666',marginTop:20*Util.size.height/667}}>元</Text>

              </View>

            </View>
          </View>
        </View>
        <View style={{ borderColor: '#F7F7F7', borderWidth: Util.pixel*3 }} ></View>

        <View style={styles.reasonView} >
          <TextInput
            style={{height: 120*Util.size.height/812, borderColor: '#9E9E9E', borderWidth: Util.pixel,borderRadius: 5}}
            onChangeText={(text) => this.setState({text})}
            value={this.state.text}
            multiline={true}
            underlineColorAndroid='transparent'
            textAlignVertical= 'top'
            placeholder='请输入您的退款理由'
          />
        </View>
        <View style={{backgroundColor:'#fff'}} >
          <View style={{ backgroundColor: '#F7F7F7', height: Util.pixel,marginLeft:12*Util.size.width/375,marginRight:12*Util.size.width/375}} ></View>
        </View>

        <View style={styles.uploadImg} >
          <Image source={{uri: 'add_image'}} style={styles.uploadImgStyle} />
        </View>

         <TouchableOpacity style={styles.BtnStyle} onPress={this._confirmInfo.bind(this)} >
           <Text style={{margin:10,color:'#fff'}} >确认提交</Text>
         </TouchableOpacity>
      </View>
    );
  }
  _confirmInfo() {

  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    borderTopWidth: Util.pixel,
    borderTopColor: '#D8D8D8',
  },
  topOrderInfo: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: '#fff',
    padding: 13*Util.size.height/667,
  },
  toyMsg: {
    flexDirection: 'row',
    backgroundColor: '#fff'
  },
  reasonView: {
    backgroundColor: '#fff',
    padding: 10,
  },
  uploadImg: {
    backgroundColor: '#fff'
  },
  BtnStyle: {
    backgroundColor: 'red',
    borderRadius: 40,
    marginTop: 72*Util.size.height/667,
    padding:5,
    width: Util.size.width*0.8,
    marginLeft: Util.size.width*0.1,
    alignItems: 'center',
  },
  title: {
    fontSize: 14,
    color:'#333',
  },
  uploadImgStyle: {
    width: 76*Util.size.width/375,
    height: 76*Util.size.width/375,
    margin:16*Util.size.width/375,
  }
})
